<template>
  <header>
    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
  </header>
  <Icon icon="arrow-up" size="2xl" type="primary" color="red"></Icon>
  <main>
    <Button type="primary" ref="buttonRef">Test Buton</Button>
    <Button plain>Plain Buton</Button>
    <Button round>round Buton</Button>
    <Button circle>VK</Button>
    <Button disabled>Test Buton</Button><br /><br />
    <Button type="primary">primary Buton</Button>
    <Button type="warning">warning Buton</Button>
    <Button type="success">success Buton</Button>
    <Button type="info">info Buton</Button>
    <Button type="danger">danger Buton</Button><br /><br />

    <Button type="primary" plain>primary Buton</Button>
    <Button type="warning" plain>warning Buton</Button>
    <Button type="success" plain>success Buton</Button>
    <Button type="info" plain>info Buton</Button>
    <Button type="danger" plain>danger Buton</Button><br /><br />
    <Button size="large">large Buton</Button>
    <Button size="small">samll Buton</Button><br /><br />
    <Button size="large" :loading="true">loading Buton</Button>
    <Button size="large" icon="arrow-up">arrow Buton</Button><br /><br />
    <Collapse v-model="openValue" accordion>
      <Item name="a">
        <template #title>nice title</template>
        <h1>headline title</h1>
        <div>this is content aaa</div>
      </Item>
      <Item name="b" title="nice title b item b">
        <div>this is bbb test</div>
      </Item>
      <Item name="c" title="nice title c item c" disabled>
        <div>this is ccc test</div>
      </Item>
    </Collapse>
    <hr />
  </main>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import Button from './components/Button/Button.vue'
import type { ButtonInterface } from './components/Button/types'
import Collapse from '@/components/Collapse/Collapse.vue'
import Item from './components/Collapse/CollapseItem.vue'
import Icon from './components/Icon/Icon.vue'
const buttonRef = ref<ButtonInterface | null>(null)
const openValue = ref(['a'])
onMounted(() => {
  if (buttonRef.value) {
    console.log(buttonRef.value.ref, 'buttonref')
  }
})
</script>
<style scoped>
header {
  line-height: 1.5;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }
}
</style>
